<template>
	<view class="main">
		<match-media :max-width="MAX_SIZEiZE - 1">
			<view class="">
				<view class="toChooseBox" v-if="isSelectMenu">
					<waves class="toChooseLeft" @onTap="clicktoChoose">
						{{'<'}}
					</waves>
					<view class="toChooseRight">
						<waves class="toChoose" @onTap="openShowList">
							{{ menuList[menuCurrent].name }}
						</waves>
						<uni-transition customClass="menuBox" ref="" mode-class="fade" :show="showList">
							<view class="left minleft">
								<waves :wavesHover="false"
									:class="['menuItem', menuCurrent === index ? 'menuActiv' : '']"
									v-for="item, index in menuList" :key="'menu' + index"
									@onTap="clickMenu(item, index)">
									{{ item.name }}
								</waves>
							</view>
						</uni-transition>
					</view>
				</view>
				<view class="" v-else>
					<view class="left maxLeft">
						<waves :wavesHover="false" :class="['menuItem', menuCurrent === index ? 'menuActiv2' : '']"
							v-for="item, index in menuList" :key="'menu' + index" @onTap="clickMenu(item, index)">
							{{ item.name }}
						</waves>
					</view>
				</view>
			</view>
		</match-media>
		<match-media :min-width="MAX_SIZEiZE">
			<view class="">
				<view class="left maxLeft">
					<waves :wavesHover="false" :class="['menuItem', menuCurrent === index ? 'menuActiv' : '']"
						v-for="item, index in menuList" :key="'menu' + index" @onTap="clickMenu(item, index)">
						{{ item.name }}
					</waves>
				</view>
			</view>
		</match-media>
		<view class="right" v-if="isSelectMenu">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	export default {
		props: {
			menuList: Array,
			default: () => [],
			value: {},
		},
		computed: {
			menuCurrent: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				}
			}
		},
		data() {
			return {
				MAX_SIZEiZE,
				showList: false,
				isSelectMenu: true

			}
		},
		methods: {
			clicktoChoose() {
				this.isSelectMenu = !this.isSelectMenu
			},
			clickMenuRefresh() {
				this.menuCurrent = index
				this.isSelectMenu = !this.isSelectMenu
				this.$emit('change', item, index)
			},
			clickMenu(item, index) {
				this.menuCurrent = index
				this.$emit('change', item, index)
				if (!this.isSelectMenu) {
					this.isSelectMenu = !this.isSelectMenu
					return
				}
				this.showList = !this.showList
			},
			openShowList() {
				this.showList = !this.showList
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		display: flex;

		.toChooseBox {
			display: flex;
			margin-bottom: 8px;

			.toChooseLeft {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 48px;
				height: 48px;
				margin-right: 16px;
				background: #2b333b;
				border-radius: 3px;
				box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
			}

			.toChooseRight {
				position: relative;
				overflow: unset;

				.toChoose {
					min-height: 48px;
					padding: 0 12px;
					background: #2b333b;
					padding-left: 40px;
					border-radius: 3px;
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
				}

				.menuBox {
					// box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
					position: absolute;
					top: calc(100% + 10px);
					left: 0;
					z-index: 1;
				}
			}
		}

		.left {
			position: sticky;
			top: 2em;
			max-width: 100%;
			min-width: 180px;
			border-radius: 10px;
			height: auto;
			margin-right: 24px;
			box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);

			.menuItem {
				background: #242a32;
				padding: 13px 16px;
				text-wrap: nowrap;
			}

			.menuActiv {
				color: #fff;
				background: #2b333b;
				border-left: 4px solid #33c38f;
			}

			.menuActiv2 {
				border-left: 4px solid #33c38f;
			}
		}

		.minleft {
			.menuItem {
				&:last-child {
					border-radius: 0 0 10px 10px;
				}

				&:first-child {
					border-radius: 10px 10px 0 0;
				}
			}
		}

		.maxLeft {
			background: #242a32;
			padding: 8px 0;

			.menuItem {
				border-radius: none !important;
			}
		}

		.right {
			background: #242a32;
			width: 75%;
			padding: 24px;
			box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
		}
	}

	@media screen and (max-width: 768px) {
		.main {
			flex-direction: column;
		}

		.menuBox {
			top: calc(100% + 5px) !important;
			// right: 0;
		}

		.left {
			border-radius: 24px !important;
			min-width: unset !important;
		}

		.maxLeft {
			border-radius: 10px !important;
		}

		.right {
			width: 100% !important;
		}

		.menuActiv {
			border-left: none !important;
		}
	}
</style>